React Transition Group — SwitchTransition and TransitionGroup

With the react-spring library, we can render animations in our React app easily.

In this article, we’ll take a look at how to get started with the React Transition Group.

SwitchTransition

The SwitchTransition component lets us control render between state transitions.

For example, we can write:

App.js

import React, { useState } from "react";
import { CSSTransition, SwitchTransition } from "react-transition-group";
import "./styles.css";

export default function App() {
  const [state, setState] = useState(false);

  return (
    <div className="App">
      <SwitchTransition>
        <CSSTransition
          key={state ? "Goodbye, world!" : "Hello, world!"}
          addEndListener={(node, done) =>
            node.addEventListener("transitionend", done, false)
          }
          classNames="fade"
        >
          <button onClick={() => setState((state) => !state)}>
            {state ? "Goodbye, world!" : "Hello, world!"}
          </button>
        </CSSTransition>
      </SwitchTransition>
    </div>
  );
}

styles.css

fade-enter {
  opacity: 0;
}
.fade-exit {
  opacity: 1;
}
.fade-enter-active {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
}
.fade-enter-active,
.fade-exit-active {
  transition: opacity 500ms;
}

We add the SwitchTransition and CSSTransition components to let us add transitions with external CSS styles.

The SwitchTransition component lets us render transitions when we toggle the state state.

CSSTransition shows the styles for each state transition.

The addEndListener prop has a function that calls done to end the transition.

TransitionGroup

The TransitionGroup component lets us manage a set of transition components.

For example, we can use it by writing:

App.js

import React, { useState } from "react";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import { v4 as uuidv4 } from "uuid";
import "./styles.css";

export default function App() {
  const [items, setItems] = useState([
    { id: uuidv4(), text: "eat" },
    { id: uuidv4(), text: "drink" },
    { id: uuidv4(), text: "sleep" },
    { id: uuidv4(), text: "walk" }
  ]);
  return (
    <div className="App">
      <TransitionGroup className="todo-list">
        {items.map(({ id, text }) => (
          <CSSTransition key={id} timeout={500} classNames="item">
            <div>
              <button
                className="remove-btn"
                variant="danger"
                size="sm"
                onClick={() =>
                  setItems((items) => items.filter((item) => item.id !== id))
                }
              >
                &times;
              </button>
              {text}
            </div>
          </CSSTransition>
        ))}
      </TransitionGroup>
    </div>
  );
}

styles.css

.remove-btn {
  margin-right: 0.5rem;
}

.item-enter {
  opacity: 0;
}
.item-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.item-exit {
  opacity: 1;
}
.item-exit-active {
  opacity: 0;
  transition: opacity 500ms ease-in;
}

We have an items state that has an array of items as its initial value.

Then we use that with the TransitionGroup component to display transitions for each item rendered inside it.

Inside it, we have th CSSTransition component to render the transition according to the styles.

When we click on the button, we remove the current item by calling setItems function.

Now when we click on the ‘x’, we see the transition as the item disappears.

Conclusion

We can add transitions to a group of items with the TransitionGroup component.

The SwitchTransition lets us render transitions between state changes.